<template>
	<view :class="{'ios': DEVICEINFO.platform=='ios'}">
		<view class="perch"></view>
		<view class="nav-bar" :style="{'--height': barInfo.customNavBarHeight,'--top': barInfo.titleVerticalPosition,'background-color': navBg || bgColor}">
			<view class="status-bar" :style="{'background-color': bgColor}"></view>
			<view class="nav-bar-content" :class="{'type4': leftType=='4'}" 
			:style="{'background-color': navBg || bgColor}">
				<view class="left" :class="{'min': leftText.length>12}">
					<view v-if="leftType=='1'" class="left-type left-type1">
						<view class="center-block">
							<view class="text" :style="{'color': leftColor}">{{leftText}}</view>
						</view>
					</view>
					<view v-else-if="leftType=='2'" class="left-type left-type2">
						<view class="center-block">
							<view class="text" :style="{'color': leftColor}">{{leftText}}</view>
							<view class="cut" @tap="cut">切换</view>
						</view>
					</view>
					<view v-else-if="leftType=='3'" class="left-type left-type3">
						<view class="center-block">
							<view class="back" @tap="back" :style="{'color': leftColor}"><view class="iconfont icon-fanhui"></view></view>
							<view class="text" :style="{'color': leftColor}">{{leftText}}</view>
						</view>
					</view>
					<view v-else-if="leftType=='4'" class="left-type left-type3">
						<view class="center-block">
							<view class="back" @tap="back" :style="{'color': leftColor}"><view class="iconfont icon-fanhui"></view></view>
						</view>
					</view>
					<view v-else-if="leftType=='5'" class="left-type left-type3">
						<view class="center-block">
							<view class="back" @tap="back"><view class="iconfont icon-fanhui"></view></view>
							<view class="title-tab">
								<view @tap="tabClick(0)" class="item" :class="{'on': tabIndex===0}">错题</view>
								<view @tap="tabClick(1)" class="item" :class="{'on': tabIndex===1}">收藏</view>
							</view>
						</view>
					</view>
					<view v-else-if="leftType=='6'" class="left-type left-type6">
						<view class="center-block">
							<view class="back" @tap="back" :style="{'color': leftColor}"><view class="iconfont icon-fanhui"></view></view>
							<view class="text" :style="{'color': leftColor}">{{leftText}}</view>
							<view class="cut" @tap="cut">切换</view>
						</view>
					</view>
				</view>
				<view v-if="title" class="center">{{title}}</view>
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"nav-bar",
		data() {
			return {
				navBg: '',
				tabIndex: 0,
			};
		},
		watch: {
			opacity(newVal){
				if(this.opacity==-1) return;
				this.navBg=this.hexToRgb()
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			leftType: {
				type: String,
				default: '2'
			},
			leftColor: {
				type: String,
				default: '#333'
			},
			leftText: {
				type: String,
				default: '左标题'
			},
			bgColor: {
				type: String,
				default: ''
			},
			topbgColor: {
				type: String,
				default: ''
			},
			opacity: {
				type: Number,
				default: -1
			},
			isback: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			barInfo() {
				return this.$store.state.barInfo;
			},
			DEVICEINFO() {
				return this.$store.state.DEVICEINFO;
			},
		},
		methods: {
			tabClick(index){
				this.tabIndex=index;
				this.$emit('tabClick',index);
			},
			cut(){
				this.$emit('cutClick')
			},
			back(){
				if (this.isback) {
				    this.$emit('back');
				} else {
				    uni.navigateBack({
				      delta: 1
				    });
				}
			},
			
			/**
			 * 将 HEX 颜色转为 RGB 格式
			 * @param {string} hex - 16进制颜色值（如 "#FF0000" 或 "#F00"）
			 * @returns {object} { r: number, g: number, b: number } 或 null（无效输入）
			 */
			hexToRgb() {
			  let hex=this.bgColor || this.topbgColor;
			  console.log(hex,'---hex')
			  // 移除 # 并验证格式
			  const sanitizedHex = hex.replace('#', '');
			  if (!/^([0-9A-F]{3}){1,2}$/i.test(sanitizedHex)) {
			    console.warn('无效的 HEX 颜色格式');
			    return null;
			  }
			  // 处理简写（如 #F00 → #FF0000）
			  let fullHex = sanitizedHex;
			  if (sanitizedHex.length === 3) {
			    fullHex = sanitizedHex.split('').map(c => c + c).join('');
			  }
			  // 解析为 RGB
			  const r = parseInt(fullHex.substring(0, 2), 16);
			  const g = parseInt(fullHex.substring(2, 4), 16);
			  const b = parseInt(fullHex.substring(4, 6), 16);
			  return `rgba(${r},${g},${b},${this.opacity})`;
			  // return { r, g, b };
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ios{
		.nav-bar{
			.status-bar{
				height: calc(var(--window-top) + 40rpx);
			}
		}
		.perch{
			height: 168rpx;
		}
	}
	.perch{
		/* #ifdef MP-WEIXIN */
		height: 182rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 200rpx;
		/* #endif */
	}
	.nav-bar{
		position: fixed;
		z-index: 1111;
		top: 0;
		left: 0;
		right: 0;
		padding-top: 40rpx;
		.status-bar{
			height: calc(var(--status-bar-height) + 10rpx);
		}
		.nav-bar-content{
			display: flex;
			justify-content: space-between;
			height: 44px;
			padding: 0 36rpx;
			&.type4{
				z-index: 1111;
				.left-type3{
					.iconfont{
						font-size: 30rpx;
					}
				}
			}
			&.adBg{
				
			}
		}
		.left,.center,.right{
			min-width: 2em;
		}
		.center{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.left{
			display: flex;
			&.min{
				.center-block .text{
					font-size: 36rpx;
				}
			}
		}
		.center{
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		.left-type{
			display: flex;
			align-content: center;
			.center-block{
				display: flex;
				align-items: flex-end;
				margin: auto 0;
			}
			.text{
				margin-right: 10rpx;
				font-size: 40rpx;
				font-weight: 600;
			}
			.cut{
				padding-bottom: 4rpx;
				color: #4F4F51;
				font-size: 30rpx;
			}
		}
		.left-type3{
			.center-block{
				align-items: center;
			}
			.back{
				margin-right: 16rpx;
				transform: translateY(2rpx);
			}
			.iconfont{
				font-size: 40rpx;
			}
		}
		.left-type6{
			.back{
				margin-right: 16rpx;
				transform: translateY(-6rpx);
			}
			.iconfont{
				font-size: 40rpx;
			}
		}
	}
	.title-tab{
		display: flex;
		margin-left: 80rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333;
		.item{
			position: relative;
			margin-right: 54rpx;
			padding-bottom: 14rpx;
			&.on{
				font-size: 30rpx;
				color: #222;
				font-weight: 600;
				&::after{
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 44rpx;
					height: 6rpx;
					margin-left: -22rpx;
					border-radius: 2rpx;
					background-color: #FF9813;
				}
			}
		}
	}
</style>